<template>
	<!-- 遮罩层 -->
	<view v-if="visible" :class="['popup-mask', visible ? 'mask-enter' : 'mask-leave']" @tap="handleClose"
		@touchmove.stop.prevent>
		<!-- 弹窗主体 -->
		<view class="popup-content" :class="[visible ? 'popup-enter' : 'popup-leave']" @tap.stop
			:style="{ width: size + 'rpx' }">
			<!-- 内容插槽 -->
			<slot></slot>
			<!-- 关闭按钮 -->
			<view class="close-btn" @click="closeModal">
				<u-icon name="close-circle" size="62" color="#ffffff"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			// 弹窗宽度（单位rpx）
			size: {
				type: [Number, String],
				default: 618,
			},
			maskClosable: {
				type: Boolean,
				default: true,
			},
		},
		methods: {
			closeModal() {
				this.$emit('close');
			},
			handleClose() {
				if (this.maskClosable) this.$emit('close');
			},
		},
	};
</script>

<style lang="scss" scoped>
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

		&.mask-enter {
			background-color: rgba(0, 0, 0, 0.6);
			opacity: 1;
			visibility: visible;
		}

		&.mask-leave {
			background-color: rgba(0, 0, 0, 0);
			opacity: 0;
			visibility: hidden;
		}
	}

	.popup-content {
		border-radius: 24rpx;
		position: relative;
		// left: 50%;
		// top: 55%;
		transform: scale(0.8);
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		opacity: 0;
		/* 移除固定高度 */
		/* 添加以下样式实现高度自适应 */
		display: flex;
		flex-direction: column;
		max-height: 80vh;
		/* 防止过高 */
		overflow-y: auto;
		/* 内容过高时滚动 */

		&.popup-enter {
			opacity: 1;
			transform: scale(1);
		}

		&.popup-leave {
			opacity: 0;
			transform: scale(0.8);
		}
	}

	.close-btn {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
		opacity: 0.8;
		transition: all 0.2s ease;

		&:active {
			opacity: 1;
			transform: scale(1.1);
		}
	}

	/* 弹跳动画关键帧 */
	@keyframes popupBounce {
		0% {
			transform: scale(0.8);
			opacity: 0;
		}

		50% {
			transform: scale(1.05);
			opacity: 1;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes popupLeave {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		100% {
			transform: scale(0.8);
			opacity: 0;
		}
	}

	/* 应用弹跳动画 */
	.popup-enter {
		animation: popupBounce 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	}

	.popup-leave {
		animation: popupLeave 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	}

	/* 遮罩层动画 */
	.mask-enter {
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.mask-leave {
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
</style>